<template>
	<view class="content">
		<view class="bg-top">
			<image src="/static/images/my_backgroud.jpg" mode="fill" class="img"></image>
		</view>
		<view class="flex-space pt-200">
			<view class="flex">
				<view class="user-icon">
					<image :src="user_info.user_img" mode="aspectFill" class="img"></image>
				</view>
				<view class="infon-box ml-10">
					<view class="flex">
						<view class="user-name-w">{{user_info.user_name}}</view>
						<view class="sex pl-10" v-show="is_man">
							<image src="/static/images/man.png" mode="aspectFit" class="img"></image>
						</view>
						<view class="sex pl-10" v-show="!is_man">
							<image src="/static/images/girl.png" mode="aspectFit" class="img"></image>
						</view>
					</view>
					<!-- <view class="c-w mt-10">五邑大学</view> -->
				</view>
			</view>
			<view class="mr-30 a-center">
				<view class="flex" @click="openSetting">
					<view class="icon-b">
						<image src="../../static/images/icon_setting.png" mode="aspectFit" class="img"></image>
					</view>
					<view class="tips-text pl-10">
						设置
					</view>
				</view>
			</view>
		</view>
		<view class="signature pl-30 pt-30">{{user_info.sign}}</view>
	</view>
	<view class="content-2">
		<view class="flex-space bg-skyblue p-30">
			<view class="white-text">邀请好友一起使用！</view>
			<view class="icon-c">
				<image src="/static/images/icon_invite.png" mode="aspectFit" class="img"></image>
			</view>
		</view>
		<view class="blod-text mt-50">我的服务</view>
		<!-- 我的页面应用区 -->
		<view class="flex flex-warp">
			<view class="a-center flex-a mr-50  mt-50" @click="openMessage">
				<view class="icon-c">
					<image src="/static/images/icon_dynamic.png" mode="aspectFit" class="img"></image>
				</view>
				<view class="iconc-text mt-10">给作者留言</view>
			</view>
			<view class="a-center flex-a mr-50  mt-50" v-show="false">
				<view class="icon-c">
					<image src="/static/images/icon_customer.png" mode="aspectFit" class="img"></image>
				</view>
				<view class="iconc-text mt-10">客服</view>
			</view>
			<view class="a-center flex-a mr-50  mt-50" @click="gotoPersonalHomepage">
				<view class="icon-c">
					<image src="/static/images/icon_message.png" mode="aspectFit" class="img"></image>
				</view>
				<view class="iconc-text mt-10">我的动态</view>
			</view>
			<view class="a-center flex-a mr-50 mt-50" @click="gotoCollection">
				<view class="icon-c">
					<image src="/static/images/icon_collection.png" mode="aspectFit" class="img"></image>
				</view>
				<view class="iconc-text mt-10">我的收藏</view>
			</view>
			<view class="a-center flex-a mr-50 mt-50" @click="gotoPublish">
				<view class="icon-c">
					<image src="/static/images/icon_publish.png" mode="aspectFit" class="img"></image>
				</view>
				<view class="iconc-text mt-10">发布校园活动</view>
			</view>
			<view class="a-center flex-a mr-50 mt-50" @click="show_application = true">
				<uv-icon name="file-text" size="24"></uv-icon>
				<view class="iconc-text mt-10">申请成为官方</view>
			</view>
		</view>
	</view>
	<uv-overlay :show="is_show" @click="is_show = false">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="blod-text j-center mb-30">给作者留下你想反馈的话吧！</view>
				<uv-textarea v-model="to_my_value" count placeholder="请文明用语,谢谢!"></uv-textarea>
				<view class="j-center mt-30">
					<uv-button type="primary" text="确定提交" @click="confirmMessage"></uv-button>
				</view>
			</view>
		</view>
	</uv-overlay>
	<uv-toast ref="toast"></uv-toast>
	<uv-popup ref="popup" mode="right" custom-style="min-width: 200rpx;" @maskClick="settingClose">
		<view class="setting-box">
			<view class="j-center blod-text">修改信息，点击确定后保存</view>
			<view class="mt-30">
				<view class="input-text">选择头像(最多一张):</view>
				<view class="mt-30"></view>
				<uv-upload :fileList="fileList1" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead"
					@delete="deletePic"></uv-upload>
			</view>
			<view class="flex mt-30">
				<view class="input-text a-center">名称：</view>
				<uv-input :placeholder="new_name" border="surround" v-model="new_name" @change="change"></uv-input>
			</view>
			<view class="flex mt-30">
				<view class="input-text a-center">性别：</view>
				<uv-tags text="男" :plain="true" icon="/static/images/man.png" @click="selectMan"></uv-tags>
				<view class="ml-30">
					<uv-tags text="女" :plain="true" borderColor="pink" color="pink" icon="/static/images/girl.png"
						@click="selectWoman"></uv-tags>
				</view>
			</view>
			<view class="flex mt-30">
				<view class="input-text a-center">已选性别：</view>
				<view class="input-text a-center">{{selected_sex}}</view>
			</view>
			<view class="input-text a-center mt-30">个性签名:</view>
			<view class="mt-10">
				<uv-textarea v-model="sign_value" count :placeholder="sign_value" maxlength="50"></uv-textarea>
			</view>
			<view class="mt-50">
				<uv-button type="success" text="确定" @click="is_sure = true"></uv-button>
			</view>
			<!-- 切换账号 -->
			<!-- <view class="mt-50">
				<uv-button type="error" text="切换账号" @click="gotoLogin"></uv-button>
			</view> -->
		</view>
	</uv-popup>
	<view class="mask-login" @click="checkLoginStatus" v-show="!is_login"></view>
	<!-- 提示登录 -->
	<uv-overlay :show="show_login" @click="show_login = false">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="blod-text">检测到还未登录</view>
				<div class="mt-30">
					<uv-button type="primary" text="现在登录" @click="gotoLogin"></uv-button>
				</div>
			</view>
		</view>
	</uv-overlay>
	<!-- 提示登录 -->
	<uv-overlay :show="show_application" @click="show_application = false">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="blod-text j-center">申请成为官方</view>
				<view class="mt-30"></view>
				<uv-divider></uv-divider>
				<view class="mt-30"></view>
				<view class="blod-text">申请理由</view>
				<view class="mt-30"></view>
				<uv-textarea v-model="application_value" count maxlength="200" placeholder="请输入内容"></uv-textarea>
				<view class="mt-30"></view>
				<uv-button type="primary" text="提交申请" @click="getApplication"></uv-button>
			</view>
		</view>
	</uv-overlay>
</template>

<script>
	export default {
		data() {
			return {
				is_show: false,
				to_my_value: '', // 给作者的留言
				new_name: '', // 修改后的名字
				selected_sex: '男', // 选择后的性别
				is_sure: false, // 确定按钮
				sign_value: '',
				is_login: false, // 检查登录状态
				show_login: false, // 提示登录
				user_info: {}, // 用户信息
				is_man: true, //性别
				user_img: '', // 用户头像
				fileList1: [],
				show_application: false,
				application_value: '',
			}
		},
		methods: {
			openMessage() {
				this.is_show = !this.is_show
			},
			// 确定留言
			async confirmMessage() {
				if (this.to_my_value) {
					const db = uniCloud.database();
					const collection = db.collection('message_toAuthor')
					const res = await collection.add({
						content: this.to_my_value,
						user_id: this.user_info._id,
						user_name: this.user_info.user_name,
						user_img: this.user_info.user_img,
						time: String(Date.now())
					})
					this.$refs.toast.show({
						type: 'success',
						message: "留言成功"
					})
					this.is_show = false
					this.to_my_value = ''
					// 等待后端再发送留言
				} else {
					this.$refs.toast.show({
						type: 'warning',
						message: "请输入信息后重试"
					});
				}
			},
			// 提交申请
			async getApplication() {
				if (this.application_value === '') {
					this.$refs.toast.show({
						type: 'warning',
						message: "请输入内容后再尝试"
					});
				}
				const db = uniCloud.database();
				const res = await db.collection('user_application').add({
					user_id: this.user_info._id,
					user_name: this.user_info.user_name,
					user_img: this.user_info.user_img,
					time: +Date.now(),
					content: this.application_value
				})
				if (res) {
					this.$refs.toast.show({
						type: 'success',
						message: "申请成功"
					});
					this.application_value = ''
					this.show_application = false
				}
			},
			gotoPersonalHomepage() {
				uni.navigateTo({
					url: '/pages/my/personalHomepage/personalHomepage'
				})
			},
			gotoCollection() {
				uni.navigateTo({
					url: '/pages/my/collection/collection'
				})
			},
			gotoPublish() {
				if (this.user_info.user_type) {
					uni.navigateTo({
						url: '/pages/my/publishSchoolActivity/publishSchoolActivity'
					})
				} else {
					this.$refs.toast.show({
						type: 'warning',
						message: "该功能仅官方人员可用，如需发布，请前往首页"
					});
				}
			},
			openSetting() {
				this.$refs.popup.open();
				const user_info = uni.getStorageSync('user_info')
				this.new_name = user_info.user_name
				this.selected_sex = user_info.sex
				this.sign_value = user_info.sign
			},
			change(e) {
				console.log('弹窗状态改变：', e);
			},
			// 下面是上传头像
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				const user_info = uni.getStorageSync('user_info')
				for (let i = 0; i < lists.length; i++) {
					const list = {
						pathName: `images/usersAvatar/${user_info.user_name}/${Date.now()}.jpg`,
						path: lists[i].url
					}
					const result = await this.uploadFilePromise(list)
					console.log('result', result.fileID)
					this.user_img = result.fileID
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(item) {
				return uniCloud.uploadFile({
					cloudPathAsRealPath: true,
					cloudPath: item.pathName,
					filePath: item.path
				})
			},
			// 修改成功
			async settingClose() {
				// 检验是否为空
				if (!this.new_name) {
					this.$refs.toast.show({
						type: 'warning',
						message: "名称不能为空"
					})
					return
				}
				if (this.is_sure) {
					try {
						const db = uniCloud.database();
						const collection = db.collection('user_info')
						const res = await collection.doc(this.user_info._id).update({
							user_name: this.new_name,
							sex: this.selected_sex,
							sign: this.sign_value,
							user_img: this.user_img
						})
					} catch (err) {
						console.error(err)
					}
					this.$refs.toast.show({
						type: 'success',
						message: "修改成功"
					})
					const db = uniCloud.database();
					const collection = db.collection('user_info')
					const res = await collection.doc(this.user_info._id).get()
					console.log('res', res)
					this.user_info = res.result.data[0]
					uni.setStorageSync('user_info', this.user_info)
				} else {
					this.$refs.toast.show({
						type: 'warning',
						message: "确定才能保存修改"
					})
				}
			},
			selectMan() {
				this.selected_sex = '男'
			},
			selectWoman() {
				this.selected_sex = '女'
			},
			checkLoginStatus() {
				// 从本地缓存获取登录状态
				const loginStatus = uni.getStorageSync('is_login');
				// login不存在或者为false就是没登录
				if (loginStatus === false || loginStatus === "") {
					// 检测到还没登录
					this.show_login = true
				} else {
					this.is_login = true
				}
			},
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				this.show_login = false
			}
		},
		async onLoad() {
			const loginStatus = uni.getStorageSync('is_login')
			if (loginStatus === true) {
				this.is_login = true
			}
			this.user_info = uni.getStorageSync('user_info')
			this.user_img = this.user_info.user_img
			if (this.user_info.sex === '女') {
				this.is_man = false
			}
		},
	}
</script>

<style scoped>
	.content {
		padding: 0 20rpx 0 20rpx;
		position: relative;
	}

	.content-2 {
		padding: 0 20rpx 20rpx 20rpx;
	}

	.pt-200 {
		padding-top: 200rpx;
	}

	.bg-top {
		width: 120%;
		height: 100%;
		position: absolute;
		left: -20rpx;
		z-index: -2;
		overflow: hidden;
	}

	.white-text {
		color: #fff;
		font-family: serif;
	}

	.bg-skyblue {
		background-color: skyblue;
		border-radius: 20rpx;
	}

	.iconc-text {
		font-size: 24rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.setting-box {
		margin-top: 200rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.input-text {
		font-size: 32rpx;
	}

	.sex {
		width: 50rpx;
		height: 50rpx;
	}

	.signature {
		font-size: 28rpx;
		color: #fff;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 400rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.mask-login {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		background-color: (0, 0, 0, 0);
	}
</style>